<template>
    <div class="box2">
        <div class="icn">
            <van-icon name="arrow-left" size="25" @click="left" />
        </div>
        <div class="box3">
            <div class="img" :key="det.id">
                <img :src="det.bimg" alt="">
                <ul>
                    <li>
                        <p>{{ det.bname }}</p>
                    </li>
                    <div>
                        <li>{{ det.bauthor }}</li>
                        <li>{{ det.bpublisher }}</li>
                        <li>9787213094231</li>
                        <li>{{ det.bnowprice }}</li>
                    </div>

                    <li><b style="font-size:20px">{{ det.originalPrice }}</b> <span style="font-size:14px">￥{{
                            det.bafterprice
                    }}</span>
                    </li>
                </ul>
            </div>

            <div :style="{ 'background-image': 'url(' + det.bimg + ')' }" style=" background-size: 100% 100%;">
                <div class="deBg"></div>
            </div>
        </div>
        <div :class="[isOpen ? 'all' : 'introduce']">
            <div>
                {{ det.mark }}
            </div>
        </div>
        <div class="position"> <b @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开全部' }}</b></div>
        <div class="user">
            <img src="../../img/double.jpg" alt="">
            <div>

            </div>
            <span>33454
                <img src="../../img/女(1).png" style="width: 15px;height: 15px;" alt="" />
            </span>
            <span>湖南工业大学</span>
        </div>
        <div class="TA">
            <b>TA的更多</b>
            <div class="more">
                <div>
                    <img src="../../img/bain.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/heaven.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/earth.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/bain.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/heaven.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/earth.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/bain.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/heaven.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/earth.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/bain.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/heaven.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
                <div>
                    <img src="../../img/earth.jpg" alt="">
                    <p>伪装学渣</p>
                    <div>￥<b>15</b> <span>2.6折</span></div>
                </div>
            </div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="shop-o" text="卖家页面" />
            <van-action-bar-icon icon="cart-o" text="购物车" />
            <van-action-bar-icon icon="chat-o" text="发消息" />
            <van-action-bar-button type="danger" text="加入购物车" color="#d2ac6b" />
        </van-action-bar>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { getDetail } from './api'
import { ref, onMounted } from 'vue'
const route = useRoute()
const router = useRouter()
console.log(route, 'route')
const la = ref(false)
//点击收起
const det = ref({})
const isOpen = ref(false)
const setDetail = () => {
    getDetail(route.params.idbook).then(res => {
        det.value = res.data.data
        console.log(res, '详情')
    })
}
const left = () => {
    router.go(-1)
}
onMounted(() => {
    setDetail()
    // window.addEventListener("scroll", Scroll);
})
</script>
<style lang="scss" scoped>
.scroll {
    display: flex;
    height: 50px;
    background-color: antiquewhite;
    align-items: center;

    p {
        margin: auto;
    }
}

.TA {
    margin-top: 10px;
    background: #fff;

    b {
        display: inline-block;
        margin-top: 10px;
    }
}

.more {
    // width: 120px;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    >div {
        width: 33%;

    }

    img {
        margin-top: 15px;
        height: 115px;
        width: 95px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-left: 5px;
        margin-right: 5px;
    }

    p {
        text-align: center;
    }

    >div {
        text-align: center;

        b {
            font-size: 16px;
        }

        span {
            background-color: rgb(185, 159, 126);
            color: #fff;
            padding: 2px 5px;
        }
    }
}



.user {
    height: 45px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    margin-top: 10px;
    // background: aquamarine;
    font-size: 13px;

    span:nth-of-type(1) {
        margin-right: 180px;
    }

    span:nth-of-type(2) {
        margin-right: 5px;
    }

    img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: bottom;
    }
}

.position {
    text-align: center;
    margin-top: 10px;
}

.introduce {
    // background-color: antiquewhite;
    overflow: hidden;
    height: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 3; // 显示2行
    -webkit-box-orient: vertical;

    >div {
        margin: 20px 5px 20px 5px;

        p {
            margin-top: 30px;
            text-align: center;
            margin-bottom: 20px;
        }
    }
}

.all {
    height: auto;

    >div {
        margin: 20px 5px 0 5px;

        p {
            margin-top: 30px;
            text-align: center;
            margin-bottom: 20px;
        }
    }
}

.box3 {
    position: relative;
}

.img ul {
    // background: deeppink;
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 150px;
    justify-content: space-between;
    color: #fff;
    position: absolute;
    z-index: 1;
    top: 63px;
    left: 200px;

    li {
        margin-top: 5px;
    }

    p {
        font-size: 22px;
        margin-bottom: 10px;
    }

    span {
        text-decoration: line-through;
        margin-left: 7px;
    }
}

.img {
    img {
        position: absolute;
        top: 59px;
        left: 42px;
        z-index: 1;
        width: 135px;
        height: 190px;
        padding-top: 10px;
        border-radius: 20px
    }


}

.box2 {
    position: relative;
    background: #fcf8f8;
    height: 100vh;
}

.icn {
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: rgba(62, 53, 53, 0.263);
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    z-index: 1;
    position: absolute;
    left: 5px;
    top: 5px;
}

.deBg {
    height: 300px;
    background-size: 100% 100%;
    backdrop-filter: blur(10px);
}
</style>
